<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝轮播</title>
    <style>
        *{margin: 0px;padding: 0px;}
        div{
            height: 200px;width: 600px;background: red; margin: 100px auto;
            position: relative;overflow: hidden;
        }
        #box ul{
            /*其实，是要ul这个长框框在滚动，而不是图片在滚动*/
            /*宽度设置足够宽，因为为了回来不明显，56张图片是复制12的*/
            width: 400%;
            list-style: none;position: absolute;top: 0px;left: 0px;
        }
        #box ul li{
            float: left;
        }
    </style>
</head>
<body>
<a href="#" class="box"></a>
<a href="#" ></a>


    <div id="box">
        <ul id="ul">
            <li><img src="img/01.jpg"></li>
            <li><img src="img/02.jpg"></li>
            <li><img src="img/03.jpg"></li>
            <li><img src="img/04.jpg"></li>
            <li><img src="img/01.jpg"></li>
            <li><img src="img/02.jpg"></li>
        </ul>
    </div>
    <script type="text/javascript">
        var box = document.getElementById("box");
        var ul = document.getElementById("ul");
        var timer = 0;
        var speed = 0;
        timer = setInterval(startMove,20);

        box.onmouseover = function () {
            clearInterval(timer);
        }

        box.onmouseout = function () {
            timer = setInterval(startMove,20);
        }

        function startMove() {
            speed--;
            speed=speed<-1200?0:speed;
            ul.style.left = speed +"px";
            document.title = speed;
        }



    </script>

</body>
</html>